﻿<%@ Page Title="" Language="C#" MasterPageFile="~/CSS/Fixed_Header_Footer/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CSS_Fixed_Header_Footer_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="styles" Runat="Server">
  <link href="layout.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="framework_scripts" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="content_placeholder" Runat="Server">
  <h2>Min-height</h2>
			<p>
				The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
			</p>
			<h2>Relative positioning</h2>
			<p>
				Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
			</p>
			<h2>Padding-bottom</h2>
			<p>
				Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
			</p>
			<p>
				Scale the text size a bit or resize your browser window to test this layout. The <a href="css/layout1.css">CSS file is over here</a>.
			</p>
			<p>
				<a href="../css.html">Back to CSS Examples</a>
			</p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="scripts" Runat="Server">
</asp:Content>

